* {
    /* 上边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
    border: 0
}


#external-div {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #cccccc;
    background-image: url('../../public/img/png/background.jpeg');
    /* 背景图片覆盖整个区域 */
    background-size: cover;
    /* 背景图片居中 */
    background-position: center;
    /* 固定背景图片 */
    background-attachment: fixed;
}


.header-content {
    height: 100%;
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}


.logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: start;
}

.img {
    width: 20px;
    height: 20px;
    padding-right: 10px;
}

.div-nav {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}


.personal-center {
    flex: 1;
    color: #131212;

    display: flex;
    align-items: center;
    justify-content: end;
}

.personal-center-content{
    cursor: pointer;
    float: right;
    text-align: center;
    /* 垂直居中对齐 */
    align-items: center;
    /* 水平居中 */
    justify-content: end;
}

.header {
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    z-index: 5000;
    opacity: 0.5;
}

.main {
    margin-top: 60px;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}


.content{
    /* 水平居中 */
    justify-content: center;
    align-content: center;
    text-align: center;
    height: calc(100vh - 60px - 20px);
    overflow-y: auto;
}
.footer {
    margin-top: 0;
    height: 20px;
    width: 100%;
    text-align: center;
}
